<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>发起对账</title>
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <link rel="stylesheet" href="css/startBill.css">
        <script src="./js/cookie.js"></script>
        <script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    </head>
    <body>
        <div id="box" v-cloak>
            <div class="content">
                <header>发起对账</header>
                <div class="billInfos">
                    <div class="billInfosLeft">
                        <table>
                            <tr>
                                <td><span class="fontRight">对账单号</span><input type="text" v-model.trim="billNum" readonly="readonly"></td>
                            </tr>
                            <tr>
                                <td><span class="fontRight">创建时间</span><input type="" v-model.trim="time1" readonly="readonly"></td>
                            </tr>
                            <tr>
                                <td><span class="fontRight">订单合计金额</span><input type="" v-model.trim="sum1" readonly="readonly"></td>
                            </tr>
                            <tr>
                                <td><span class="fontRight">订单实付金额</span><input type="" v-model.trim="sum2" readonly="readonly"></td>
                            </tr>
                            <tr>
                                <td><span class="fontRight">平台补贴</span><input type="" v-model.trim="sum3" readonly="readonly"></td>
                            </tr>
                            <tr>
                                <td><span class="fontRight">商家补贴</span><input type="" v-model.trim="sum4" readonly="readonly"></td>
                            </tr>
                            <tr>
                                <td><span class="fontRight">商家结算费率</span><input type="" v-model.trim="ratio" readonly="readonly"></td>
                            </tr>
                            <tr>
                                <td><span class="fontRight">结算金额</span><input type="" v-model.trim="sum5" readonly="readonly"></td>
                            </tr>
                            <tr>
                                <td><p style="border:1px dashed #ccc;margin:20px 0 0 27px;width:110%;"></p></td>
                            </tr>
                            <tr>
                                <td>
                                    <span class="fontRight">结算状态</span>
                                    <input type="" v-model.trim="settleStatus" readonly="readonly">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span class="fontRight">确认时间</span>
                                    <input type="" v-model.trim="times1" readonly="readonly">
                                    <label style="font-size:8px;">(对方确认时间)</label>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span class="fontRight">开票时间</span>
                                    <input type="" v-model.trim="times2" readonly="readonly">
                                    <label style="font-size:8px;">(发票开出时间)</label>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span class="fontRight">结算时间</span>
                                    <input type="" v-model.trim="times3" readonly="readonly">
                                    <label style="font-size:8px;">(财务结算时间)</label>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                <div class="footerText">
                                    <span>结算备注:</span>
                                    <textarea v-model.trim="textValue"></textarea>
                                </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="billInfosRight">
                        <div class="tableTitle" v-cloak>
                            <p style="margin-left:20px;">对账订单（共{{orderData.length}}单）</p>
                            <p class="continueAdd" @click="addBill">继续添加</p>
                        </div>
                        <div class="tables">
                            <el-table
                                v-loading="loading"
                                :data="orderData"
                                border
                                style="width:100%;text-align:center;">
                                <el-table-column
                                    prop="ORDERNO"
                                    label="订单号码"
                                    width="120"
                                    >
                                    <template slot-scope="scope">
                                        <p style="color:blue;">{{scope.row.ORDERNO}}</p>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="date"
                                    label="完工日期"
                                    width="140"
                                    >
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.ARRIVETIME">{{scope.row.ARRIVETIME | format}}</span>
                                        <span v-else>--</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="TOTALFEE"
                                    label="订单金额"
                                    >
                                    <template slot-scope="scope">
                                        ￥{{scope.row.TOTALFEE}}
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="PAYAMOUNT"
                                    label="实付金额"
                                    >
                                    <template slot-scope="scope">
                                        ￥{{scope.row.PAYFEE}}
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="PLATFORMSUBSIDY"
                                    label="平台补贴"
                                    >
                                    <template slot-scope="scope">
                                        ￥{{scope.row.PLATFORMSUBSIDY}}
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="BUSINESSSUBSIDY"
                                    label="商家补贴"
                                    >
                                    <template slot-scope="scope">
                                        ￥{{scope.row.BUSINESSSUBSIDY}}
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="opration"
                                    label="操作"
                                    >
                                    <template slot-scope="scope">
                                        <p style="cursor:pointer;" @click="deleteBill(scope.row.ORDERID)">
                                            <img src="./images/del.jpg" alt="">
                                        </p>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <div class="billButtons" style="display:flex;justify-content:center;">
                    <button class="dialogBtn" @click="ensure">确认保存</button>
                    <button class="dialogBtn" onclick="history.back()">关闭取消</button>
                </div>
                <!-- 继续添加 -->
                <div class="continueAdd">
                    <el-dialog title="选择对账订单" width="90%" style="text-align:center;font-weight:700;" :visible.sync="dialogTableVisible" center>
                        <div class="condition" style="display:flex;margin-bottom:20px;">
                            <div class="headerOrder">
                                <el-input v-model.trim.trim="input1" placeholder="订单号/手机号"></el-input>
                            </div>
                            <div class="headerDate">
                                <span class="demonstration" style="margin:0 20px;">起始时间</span>
                                <el-date-picker
                                    v-model.trim="value4"
                                    type="daterange"
                                    :picker-options="pickerOptions2"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    align="right">
                                </el-date-picker>
                            </div>
                            <div class="headerBtn" style="margin-left:20px;" @click="search">
                                <el-button>搜索</el-button>
                            </div>
                        </div>
                        <div class="titleInfo" style="display:flex;">
                            <p style="margin-right:30px;">
                                <span class="allSel" @click="allSel">全选/</span>
                                <span class="F_allSel" @click="F_allSel">反选</span>
                            </p>
                            <p>合作平台：{{allData.PLATFORMNAME}}</p>
                            <p style="margin-left:30px;">待对账订单：{{billData.length}}单</p>
                        </div>
                        <el-table :data="billData">
                            <el-table-column
                            prop="select"
                            label="选择"
                            width="50">
                            <template slot-scope="scope">
                                <input type="checkbox" width="50" class="checkbox" @click="dialogCheckbox(scope.row.ORDERID)"/>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="ID"
                            label="序号"
                            type="index"
                            width="50">
                        </el-table-column>
                        <el-table-column
                            prop="ORDERNO"
                            label="订单号码"
                            width="216">
                            <template slot-scope="scope">
                                <p style="color:#6181d0;">{{scope.row.ORDERNO ? scope.row.ORDERNO : '--'}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="SHOPNAME"
                            label="店名"
                            width="150">
                        </el-table-column>
                        <el-table-column
                            prop="CREATETIME"
                            label="完工日期"
                            width="167">
                            <template slot-scope="scope">
                                <p v-if="scope.row.ARRIVETIME">{{scope.row.ARRIVETIME|format}}</p>
                                <p v-else>--</p>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="STATUS"
                            label="订单状态"
                            width="105">
                            <!--订单状态 看文档5.18 getOrderDetail-->
                            <!--STATUS,PAY_STATUS依次对应1,0-待确认/待报价 2,0-待付款 2,1-待服务 3,1-待评价 4,1-已完成 5-已取消 6-已过期-->
                            <template slot-scope="scope">
                                <span v-if="scope.row.STATUS==1&&scope.row.PAY_STATUS==0" style="color:#F83F3F">待确认</span>
                                <span v-else-if="scope.row.STATUS==2&&scope.row.PAY_STATUS==0" style="color:#F83F3F">待付款</span>
                                <span v-else-if="scope.row.STATUS==2&&scope.row.PAY_STATUS==1" style="color:#F83F3F">待服务</span>
                                <span v-else-if="scope.row.STATUS==3&&scope.row.PAY_STATUS==1" style="color:#F83F3F">待评价</span>
                                <span v-else-if="scope.row.STATUS==4&&scope.row.PAY_STATUS==1" style="color:#46CC22">已完成</span>
                                <span v-else-if="scope.row.STATUS==5" style="color:#666">已取消</span>
                                <span v-else-if="scope.row.STATUS==6" style="color:#46CC22">已过期</span>
                                <span v-else>--</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="TOTALFEE"
                            label="订单金额"
                            width="110">
                        </el-table-column>
                        <el-table-column
                            prop="opration"
                            label="操作"
                            width="104">
                            <template slot-scope="scope">
                                <p @click="goDetail(scope.row.ORDERID)" class="detail" style="cursor:pointer;color:#6181d0;">订单详情</p>
                            </template>
                        </el-table-column>
                        </el-table>
                        <div class="dialogFooter" style="display:flex;justify-content:center;">
		                    <button class="dialogBtn" @click="dialogAddBill">添加对账</button>
		                    <button class="dialogBtn" @click="dialogClose">关闭</button>
		                </div>
                    </el-dialog>
                </div>
            </div>
        </div>
    </body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.5"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
var vm = new Vue({
    el: '#box',
    data: {
        //getIp1: 'http://192.168.0.180:8085/CARSERV', //测试环境ip
        //getIp1: 'http://carnt.carnettong.com:8088/CARSERV', //正式环境ip
        getIp1: 'http://121.40.78.200:88/CARSERV',
        loading: true, //true加载中 false加载完成
        allData: '', //发起对账所有数据
        orderData: [], //对账订单数据
        time1: '', //创建时间
        ratio: '', //结算费率
        billData: [], //继续添加对账订单数据
        dialogTableVisible: false, //是否显示
        input1: '', //订单/手机号
        value4: '', //起始、结束时间的数组
        order_idss: '', //订单字符串，用逗号拼接
        textValue:'',//文本框值
        times1:'-',//确认时间
        times2:'-',//开票时间
        times3:'-',//结算时间
        billNum:'',//对账单号
        settleStatus:'-',//结算状态
        once:true,//防止重复提交
        pickerOptions2: {
            shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
        },
    },
    created: function () {
        //发起对账
        this.$http.post(this.getIp1 + '/PlatformBill/getStartBill.action', {ORDERIDS:getCookie('order_ids')}, {emulateJSON: true}).then(
                res => {
                    if(res.body.STATUC_CODE == 1){
                        this.allData = res.body;
                        this.orderData = res.body.ORDERARR;
                        this.time1 = this.formatTimes(res.body.BILLTIME);
                        this.ratio = this.percentage(res.body.RATIO);
                        setTimeout(()=>this.loading = false,0);
                    }
                }, err => console.log(err)
        );
    },
    computed: {
        //合计金额
        sum1: function(){
            let sum1 = 0;
            for(let i=0;i<this.orderData.length;i++){
                sum1 += parseFloat(this.orderData[i].TOTALFEE ? this.orderData[i].TOTALFEE : 0);
            }
            return sum1;
        },
        //实付金额
        sum2: function(){
            let sum2 = 0;
            for(let i=0;i<this.orderData.length;i++){
                sum2 += parseFloat(this.orderData[i].PAYFEE ? this.orderData[i].PAYFEE : 0);
            }
            return sum2;
        },
        //平台补贴
        sum3: function(){
            let sum3 = 0;
            for(let i=0;i<this.orderData.length;i++){
                sum3 += parseFloat(this.orderData[i].PLATFORMSUBSIDY ? this.orderData[i].PLATFORMSUBSIDY : 0);
            }
            return sum3;
        },
        //商家补贴
        sum4: function(){
            let sum4 = 0;
            for(let i=0;i<this.orderData.length;i++){
                sum4 += parseFloat(this.orderData[i].BUSINESSSUBSIDY ? this.orderData[i].BUSINESSSUBSIDY : 0);
            }
            return sum4;
        },
        //结算价 = (实付金额+平台补贴)*结算费率-商家补贴  可能为负值
        sum5: function(){
            let sum5 = 0;
            sum5 = (this.sum2+this.sum3)*this.allData.RATIO-this.sum4;
            sum5 = sum5.toFixed(2);
            if(isNaN(sum5)){
                return 0;
            }else{
                return sum5;
            }
        }
    },
    methods: {
        //格式
        formatTimes(val) {
            var y = new Date(val).getFullYear();
            var m = new Date(val).getMonth() + 1 >= 10 ? new Date(val).getMonth() + 1 : '0' + (new Date(val).getMonth() + 1);
            var d = new Date(val).getDate() >= 10 ? new Date(val).getDate() : '0' + new Date(val).getDate();
            var h = new Date(val).getHours() >= 10 ? new Date(val).getHours() : '0' + new Date(val).getHours();
            var ms = new Date(val).getMinutes() >= 10 ? new Date(val).getMinutes() : '0' + new Date(val).getMinutes();
            return y + "-" + m + "-" + d + " " + h + ":" + ms;
        },
        //把小数转为百分数
        percentage(val){
            let b = (val * 100).toFixed(2) + "%";
            if(val.match('%')){
                return val;
            }else{
                return b;
            }
        },
        //删除账单
        deleteBill(id){
            if(this.orderData.length <= 1){
                this.$alert('请至少保留一个对账订单!', '提示');
                return;
            }
            let arr = this.orderData;
            for(let i=0;i<this.orderData.length;i++){
                if(this.orderData[i].ORDERID == id){
                    this.orderData.splice(i,1);
                }
            }
        },
        //继续添加
        addBill() {
            let order_ids = '';
            for(let i=0;i<this.orderData.length;i++){
                order_ids += this.orderData[i].ORDERID+',';
            }
            this.order_idss = order_ids.substring(0,order_ids.length-1);
            //继续添加
            let obj = {};
            obj.ORDERIDS = this.order_idss;
            obj.PLATFORMNO = this.allData.PLATFORMNO;
            obj.LIKESTRING = '';
            obj.STARTTIME = '';
            obj.ENDTIME = '';
            this.$http.post(this.getIp1 + '/PlatformBill/getOrderListByPlatformNo.action', obj, {emulateJSON: true}).then(
                    res => {
                        if(res.body.STATUC_CODE == 1){
                            this.billData = res.body.WAITORDERARR;
                            //过滤掉 ISBILL==0 的数组
                            for(let j=0;j<this.billData.length;j++){
                                if(this.billData[j].ISBILL == 0){
                                    this.billData.splice(j,1);
                                }
                            }
                            for(let i=0;i<this.billData.length;i++){
                                this.$set(this.billData[i],'flag',0);//0-未选中 1-选中
                            }
                        }
                    }, err => console.log(err)
            );
            this.dialogTableVisible = true;
            //去掉所有选中的checkbox
            $(".continueAdd input[type='checkbox']").attr('checked',false);
        },
        //是否选中checkbox
        dialogCheckbox(id){
            for(let i=0;i<this.billData.length;i++){
                if(this.billData[i].ORDERID == id){
                    if(this.billData[i].flag == 0){
                        this.billData[i].flag = 1;
                    }else{
                        this.billData[i].flag = 0;
                    }
                }
            }
        },
        //全选
        allSel(){
            for(let i=0;i<this.billData.length;i++){
                this.$set(this.billData[i],'flag',1);//0-未选中 1-选中
            }
            $(".continueAdd input[type='checkbox']").each(function () {
                $(this).prop("checked",true);
            });
        },
        //反选
        F_allSel(){
            for(let i=0;i<this.billData.length;i++){
                if(this.billData[i].flag == 1){
                    this.billData[i].flag = 0;
                }else{
                    this.billData[i].flag = 1;
                }
            }
            $(".continueAdd input[type='checkbox']").each(function () {
                $(this).prop("checked", !$(this).prop("checked"));
            });
        },
        //搜索
        search(){
            /* 这个作用是完善点击叉叉和清除时再搜索的bug    ----start*/
            if(this.value4 == null) this.value4 = '';
            /* 这个作用是完善点击叉叉和清除时再搜索的bug    ----end*/
            var start = this.value4[0] ? this.formatTimes(this.value4[0]) : '';
            var end = this.value4[0] ? this.formatTimes(this.value4[1]) : '';
            //继续添加列表
            let obj = {};
            obj.ORDERIDS = this.order_idss;
            obj.PLATFORMNO = this.allData.PLATFORMNO;
            obj.LIKESTRING = this.input1;
            obj.STARTTIME = start;
            obj.ENDTIME = end;
            this.$http.post(this.getIp1 + '/PlatformBill/getOrderListByPlatformNo.action', obj, {emulateJSON: true}).then(
                    res => {
                        if(res.body.STATUC_CODE == 1){
                            this.billData = res.body.WAITORDERARR;
                            for(let i=0;i<this.billData.length;i++){
                                this.$set(this.billData[i],'flag',0);//0-未选中 1-选中
                            }
                        }
                    }, err => console.log(err)
            );
        },
        //添加对账
        dialogAddBill(){
            let str = '';
            for(let i=0;i<this.billData.length;i++){
                if(this.billData[i].flag == 1){
                    str += i+',';
                }
            }
            if(str.length == 0){
                this.$alert('请选择对账单!', '提示');
                return;
            }
            strr = str.substring(0,str.length-1);
            arr = strr.split(',');
            let arr_new = [];
            for(let j=0;j<arr.length;j++){
                arr_new.push(this.billData[j]);
                //去掉flag属性
                delete arr_new.flag;
            }
            for(let k=0;k<arr_new.length;k++){
                this.orderData.push(arr_new[k]);
            }
            this.dialogTableVisible = false;
        },
        //关闭继续添加窗口
        dialogClose(){
            this.dialogTableVisible = false;
        },
        //详情
        goDetail(id) {
            location.href = './orderDetail.html?order_id='+id;
        },
        //确认保存
        ensure(){
            if(this.orderData.length < 1){
                this.$alert('没有对账订单无法保存!', '提示');
                return;
            }
            let order_ids = '';
            for(let i=0;i<this.orderData.length;i++){
                order_ids += this.orderData[i].ORDERID+',';
            }
            let order_idss = order_ids.substring(0,order_ids.length-1);
            //确认对账
            let obj = {};
            obj.ORDERIDS = order_idss;
            obj.PLATFORMNO = this.allData.PLATFORMNO;
            obj.BILLTOTALFEE = this.sum1;
            obj.BILLPAYFEE = this.sum2;
            obj.BILLPLATFORMSUBSIDY = this.sum3;
            obj.BILLBUSINESSSUBSIDY = this.sum4;
            obj.SETTLEMENTFEE = this.sum5;
            obj.RATIO = this.allData.RATIO;
            obj.REMARK = this.textValue;
            if(this.once){
                this.once = false;
                this.$http.post(this.getIp1 + '/PlatformBill/getConfirmBill.action', obj, {emulateJSON: true}).then(
                        res => {
                            if(res.body.STATUC_CODE == 1){
                                this.$alert('对账成功!', '提示',{
                                    showClose:false,
                                    showConfirmButton:false
                                });
                                setTimeout(function(){location.href="./workOrder.html"},1000);
                            }
                        }, err => console.log(err)
                );
            }
        },
    },
    filters: {
        format(val) {
            var y = new Date(val).getFullYear();
            var m = new Date(val).getMonth() + 1 >= 10 ? new Date(val).getMonth() + 1 : '0' + (new Date(val).getMonth() + 1);
            var d = new Date(val).getDate() >= 10 ? new Date(val).getDate() : '0' + new Date(val).getDate();
            var h = new Date(val).getHours() >= 10 ? new Date(val).getHours() : '0' + new Date(val).getHours();
            var ms = new Date(val).getMinutes() >= 10 ? new Date(val).getMinutes() : '0' + new Date(val).getMinutes();
            return y + "-" + m + "-" + d + " " + h + ":" + ms;
        },
        RMB(val){
            return '$'+val;
        }
    },
});
    </script>
</html>
